<template>
    <div>
      <div class="title">
        <div class="h3"><span></span>热门科室</div>
        <a href="#" class="more">更多&nbsp;></a>
      </div>
      <div class="full-line"></div>
      <div class="main">
        <div class="box" :class="display ? 'hide' : 'show'">
          <dl v-for="(item,index) in hotDataList" :key="index"  @click="goDoctor(item)">
            <dt><img :src="'/static/img/'+item.hotDataImg+'@2x.png'" alt=""></dt>
            <dd>{{item.dictName}}</dd>
          </dl>
        </div>
      </div>
      <div v-if="show" class="upDown" @click="goUp">展开<img :class="display ? 'on' : ''" src="/static/img/ic_arrow_down.png" alt=""></div>
      <div class="btn-box"></div>
      <div class="title">
        <div class="h3"><span></span>推荐医生</div>
        <a href="#" class="more">更多&nbsp;></a>
      </div>
      <div class="full-line"></div>
      <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" infinite-scroll-immediate-check="false">
        <doctor-item v-for="(doctorDetail,index) in doctorList" :key="index" :doctorDetail="doctorDetail" @click.native="toDetail(doctorDetail)"></doctor-item>
      </ul>
    </div>
</template>

<script>
import DoctorItem from "./DoctorItem.vue";
import Header from "../Header.vue";
export default {
  data() {
    return {
      orgId: this.$route.query.orgId,
      type: this.$route.query.type,
      doctorList: [],
      hotDataList: [],
      loading: false,
      display:false,
      show:false,
      page: 1,
      loaded: false //是否加载完成
    };
  },
  components: {
    doctorItem: DoctorItem,
    appHeader: Header
  },

  methods: {
    goUp(){
      this.display = !this.display;
    },
    toDetail(doctorDetail) {
      this.$router.push({
        path: "doctorDetail",
        query: { userId: doctorDetail.userId.value }
      });
    },
    goDoctor(item) {
      this.$router.push({
        path: "doctorOneList",
        query: { deptId: item.dictId.value, orgId: this.orgId }
      });
    },
    loadMore() {
      if (!this.loaded) {
        this.requestDoctorList();
      }
    },

    requestDoctorList() {
      this.loading = true;
      let request = {
        type: this.type,
        orgId: this.orgId,
        pageNum: this.page,
        pageSize: 10
      };
      let vm = this;
      let method = "doctorList";
      if (this.type) {
        method = "newDocList";
      }
      this.$store
        .dispatch(method, request)
        .then(data => {
          vm.page++;
          if (data.doctorList) {
            for (let i = 0; i < data.doctorList.length; i++) {
              vm.doctorList.push(data.doctorList[i]);
            }
          }
          vm.loaded = vm.doctorList.length == data.total;
          vm.loading = false;
        })
        .catch(error => {
          vm.loading = false;
          vm.loaded = true;
          this.$toast(error.message);
        });
    },
    //热门科室
    requestTypeList() {
      this.loading = true;
      let request = {
        orgId: this.orgId,
        h5query: true
      };
      // let that = this;
      this.$store
        .dispatch("orgDeptGet", request)
        .then(data => {
          if (data.length > 0) {
            for (let i = 0; i < data.length; i++) {
              this.hotDataList.push(data[i]);
              let img = data[i].dictName;
              switch (img) {
                case '外科':
                  this.hotDataList[i].hotDataImg = 'out';
                  break;
                case '内科':
                  this.hotDataList[i].hotDataImg = 'in';
                  break;
                case '牙科':
                  this.hotDataList[i].hotDataImg = 'tooth';
                  break;
                case '眼科':
                  this.hotDataList[i].hotDataImg = 'eye';
                  break;
                case '男科':
                  this.hotDataList[i].hotDataImg = 'man';
                  break;
                case '妇科':
                  this.hotDataList[i].hotDataImg = 'women';
                  break;
                case '儿科':
                  this.hotDataList[i].hotDataImg = 'children';
                  break;
                case '皮肤科':
                  this.hotDataList[i].hotDataImg = 'skin';
                  break;
                case '精神科':
                  this.hotDataList[i].hotDataImg = 'mind';
                  break;
                case '耳鼻喉科':
                  this.hotDataList[i].hotDataImg = 'ent';
                  break;
                case '肿瘤科':
                  this.hotDataList[i].hotDataImg = 'tumor';
                  break;
                case '骨科':
                  this.hotDataList[i].hotDataImg = 'bone';
                  break;
                case '中医科':
                  this.hotDataList[i].hotDataImg = 'medicine';
                  break;
                case '结核科':
                  this.hotDataList[i].hotDataImg = 'phthisis';
                  break;
                case '生殖科':
                  this.hotDataList[i].hotDataImg = 'reproductive';
                  break;
                default:
                  this.hotDataList[i].hotDataImg = 'common';
                  break;
              }

            }
            if(data.length > 8){
              this.display = true;
              this.show = true;
            }else{
              this.display = false;
              this.show = false;
            }
          }

          this.loading = false;
        })
        .catch(e => {
          this.loading = false;
          this.$toast(e.message);
        });
    }
  },

  created() {
    this.requestDoctorList();
    this.requestTypeList();
    console.log("this.orgId", this.orgId);
  }
};
</script>

<style scoped>
ul,
li {
  padding: 0;
  list-style: none;
  margin: 0;
}
.title {
  padding: 14px 16px;
  background: #fff;
  overflow: hidden;
}
.title .h3 {
  float: left;
  color: #000;
  font-size: 14px;
}
.h3 span {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #0093ff;
  margin-right: 5px;
  position: relative;
  top: 3px;
}
.more {
  float: right;
  font-size: 13px;
  color: #b3b3b3;
  text-decoration: none;
}
.main {
  background: #fff;
  padding: 14px 16px;
}
.box {
  /* display: flex; */
  overflow: hidden;
  transition: transform .3s;
}
.hide{
  height: 185px;
}
.show{
  height: auto;
}
.box dl {
  text-align: center;
  /* margin-right: 55px; */
  float: left;
  width: 25%;
}
.box dt img {
  width: 40px;
  height: 40px;
}
.box dd {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: #666666;
  margin-top: 5px;
}
.upDown{
  width: 100%;
  height: 44px;
  line-height: 44px;
  border-top:1px solid #eee;
  text-align: center;
  color: #666;
  font-size: 14px;
  background: #fff;
}
.upDown img{
  width: 10px;
  height: 10px;
  margin-left: 5px;
  transition: transform .3s;
}
.on{
  transform: rotateZ(180deg);
}
.btn-box{
  width: 100%;
  height: 100px;
  background: #fff;
  margin: 10px 0;
}
</style>
